.list-item {
  width: 100%;
  padding-bottom: 15px;
  margin-bottom: 15px;
  list-style: none;
  border-bottom: 1px solid #E6E6E6;
  position: relative;
  &::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 1px);
    display: block;
    content: '';
    width: 0;
    background: $primary;
    height: 1px;
    transition: .4s;
  }
  &:hover {
    &::after {
      width: 100%;
    }
  }

  &.list-avatar {
    padding-left: 47px;
  }
  .avatar-box {
    position: absolute;
    top: 6px;
    left: 0;
    line-height: 0;
  }
  .icon-box {
    font-size: 30px;
    border-radius: 50%;
  }
  .description, .path {
    display: block;
    color: $text-gray;
    font-size: 12px;
  }
  .title {
    display: block;
    color: #000;
    font-size: 15px;
    padding-right: 20px;
    margin-bottom: 4px;
  }
  .info {
    width: 100%;
    margin-top: 17px;
    > span {
      @extend .icon-middle-wrap;
      width: 90px;
      margin-right: 20px;
      color: #333;
      vertical-align: middle;
      &.user {
        width: 180px;
      }
      .fas {
        margin-right: 5px;
      }
    }
  }
  .time-box {
    position: absolute;
    right: 0;
    bottom: 14.5px;
    font-size: 12px;
    color: $text-gray;
  }
  .action {
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 16px;
    opacity: 0;
    text-align: center;
    .btn-follow-user {
      font-size: 12px;
      height: 26px;
      line-height: 26px;
    }
  }
  .action-icon {
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    details {
      display: inline-block;
      summary:hover {
        border-radius: 15px;
        background: #f7f7f7;
      }
    }
    a:hover {
      border-radius: 15px;
      background: #f7f7f7;
      // star、unstar、watch、unwatch
      &.btn span {
        opacity: 1;
        max-width: 10em;
        padding-left: 15px;
      }
    }
    .fas {
      width: 30px;
      vertical-align: unset;
    }
    // star、unstar、watch、unwatch
    a.btn {
      padding-left: 0;
      padding-right: 0;
      height: 30px;
      height: 30px;
      @extend .icon-middle-wrap;
      .fas {
        transform: scale(1.2);
        order: 2;
      }
      span {
        font-size: 12px;
        display: inline-block;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-width .4s linear, padding .4s linear, opacity 1s ease;
      }
    }
  }

  &:hover {
    .action {
      opacity: 1;
    }
  }
}

.list-group {
  .list-group-item {
    padding: 10px 0;
  }
}

.icon-box {
  &.icon-doc {
    color: #2F70FF;
  }
  &.icon-note {
    color: #3BB46E;
  }
  &.icon-issue {
    color: #FF4B4B;
  }
  &.icon-repo {
    color: #FCBA00;
  }
}

.list-col-2 {
  @extend .clearfix;
  .list-item {
    float: left;
    width: calc(50% - 20px);
    &:nth-child(2n + 1) {
      margin-right: 40px;
    }
  }
}